<template>
  <div class="w-100% h-100%">
    <ProTable
      ref="permsTableRef"
      row-key="id"
      :filters="filters"
      :columns="columns"
      :get-table-data="getTableData"
      custom-id="basic-menu"
    > 
      <template #column-changeContentList="{ row }">
        <div v-if="row.remark" style="overflow-wrap: break-word; word-break: break-all;white-space: normal;"> {{ row.remark }}</div>
        <div v-for="item in row.changeContentList" style="overflow-wrap: break-word; word-break: break-all;white-space: normal;">
          {{ item }}
        </div>
      </template>
      <template #filter-operationModuleType="{ form, prop }">
        <el-cascader v-model="form[prop]" :options="moduleTypeOptions" filterable clearable :collapseTags="true" :collapseTagsTooltip="true" :maxCollapseTags="0"
          :props="{ value: 'code', label: 'name', children: 'typeList', multiple: true, checkStrictly: true, expandTrigger: 'hover' }"/>
      </template>
      <template #column-operate="{ row }">
        <el-button type="primary" link @click="openChangeDetail(row)">
          <Icon icon="icon-park-outline:history-query" />变更详情
        </el-button>
        <el-button v-if="row.requestParams" @click="openRequestParams(row)" type="primary" link>
          <Icon icon="icon-park-outline:history-query" />请求参数
        </el-button>
      </template>
    </ProTable>

    <!-- 变更详情 -->
    <OperationLogChangeDetail ref="OperationLogChangeDetailRef"></OperationLogChangeDetail>
    <!-- 请求参数 -->
    <OperationLogRequestParams ref="OperationLogRequestParamsRef"></OperationLogRequestParams>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted  } from 'vue'
  import { ElTree, ElInput, ElButton, ElPopconfirm, ElCascader } from 'element-plus'
  import { ProTable, FilterItem, TableColumnItem, Icon } from '@/components'
  import { getModuleAndTypeListApi, selectOperationLogPageApi } from '@/api/system/operation-log'
  import OperationLogRequestParams from './components/operation-log-request-params.vue'
  import OperationLogChangeDetail from './components/operation-log-change-detail.vue'

  const permsTableRef = ref<InstanceType<typeof ProTable>>()
  const OperationLogChangeDetailRef = ref<InstanceType<typeof OperationLogChangeDetail>>()
  const OperationLogRequestParamsRef = ref<InstanceType<typeof OperationLogRequestParams>>()

  const props = defineProps({
    bizId: {
      type: String
    }
  })
  
  const moduleTypeOptions = ref([])

  const filters: FilterItem[] = [
    {
      label: '操作人',
      prop: 'operationByName'
    },
    {
      label: '操作时间',
      prop: ['operationTimeStart', 'operationTimeEnd'],
      type: 'datetimerange',
    },
    {
      label: '操作类型',
      prop: 'operationModuleTypeList',
      slot: 'filter-operationModuleType',
    }
  ]


  const columns: TableColumnItem[] = [
    {
      label: '操作人',
      prop: 'operationByName'
    },
    {
      label: '操作时间',
      prop: 'operationTime'
    },
    {
      label: '操作模块',
      prop: 'operationModuleName'
    },
    {
      label: '操作类型',
      prop: 'operationTypeName'
    },
    {
      label: '变更内容',
      prop: 'changeContentList',
      slot: 'column-changeContentList',
      minWidth: 200
    },
    {
      label: '操作',
      slot: 'column-operate',
      width: 195
    },
  ] 
  
  onMounted(()=>{
    getModuleAndTypeListApi().then(res=>{
      moduleTypeOptions.value = res?.data
    })
  })

  const getTableData = async (params) => {
    const operationModuleCodeList = []  // 操作模块code集合
    const operationTypeCodeList = []    // 操作类型code集合
    if(params.operationModuleTypeList) {
      for (const itemList of params.operationModuleTypeList) {
        if(itemList.length == 1) {
          // 只有一级 -> 选的是 操作模块
          operationModuleCodeList.push(itemList[0])
        } else if(itemList.length == 2) {
          // 有两级 -> 选的是 操作类型
          operationTypeCodeList.push(itemList[1])
        }
      }
    }

    return (await selectOperationLogPageApi({
      bizId: props.bizId,
      operationModuleCodeList,
      operationTypeCodeList,
      ...params
    })).data
  }

  const refreshData = () => {
    permsTableRef.value.refreshData()
  }



  // 查看变更详情
  const openChangeDetail = (row) => {
    OperationLogChangeDetailRef.value.openDialog(row)
  }

  // 查看请求参数
  const openRequestParams = (row) => {
    OperationLogRequestParamsRef.value.openDialog(row.requestParams)
  }

</script>

